<template>
    <div class="table-box">
        <ProTable ref="onlineTable" title="在线用户" row-key="userId" :columns="columns" :request-api="getOnlineUsersApi">
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="danger" link :icon="Delete" @click="deleteUser(scope.row)">踢人</el-button>
            </template>
        </ProTable>

    </div>
</template>

<script lang="tsx" setup name="roleManage">
    import ProTable from "@/components/ProTable/index.vue";
    import {ColumnProps} from "@/components/ProTable/interface";
    import {getOnlineUsersApi, kickOfflineApi} from "@/api/modules/test/auth";
    import {CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Setting} from "@element-plus/icons-vue";
    import {ref} from "vue";
    import {useHandleData} from "@/hooks/useHandleData";

    // 表单配置项
    const columns: ColumnProps[] = [
        {type: "index", label: "序号", width: 150},
        {
            prop: "nickName",
            label: "在线用户",
            align: "center",
            search: {
                el: "input"
            }
        },
        {prop: "os", label: "操作系统"},
        {prop: "city", label: "城市"},
        {prop: "ip", label: "请求IP"},
        {prop: "loginTime", label: "登录时间"},
        {prop: "lastActivityTime", label: "最后操作时间"},
        {prop: "operation", label: "操作", width: 350, fixed: "right"}
    ];

    // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
    const onlineTable = ref();

    // 踢人
    const deleteUser = async (val: any) => {
        await useHandleData(kickOfflineApi, {token: val.tokenValue}, "踢人下线");
        onlineTable.value.getTableList();
    }
</script>
